<template>
  <el-select
    v-model="value"
    filterable
    allow-create
    default-first-option
    placeholder="选择需要查看的班级"
    @change="handleChange"
    :collapse-tags="collapseTags"
  >
    <!-- multiple -->
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      options: [{ value: "全部", label: "全部" }],
      value: "", // []
    };
  },
  props: {
    courseData: {
      type: Object,
      default: () => {
        return {
          classNameList: [],
        };
      },
    },
    defaultSelct: String,
    collapseTags: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
  },
  watch: {
    "courseData.classNameList"(newValue) {
      this.handlePushOption();
    },
    value(n) {
    },
  },
  methods: {
    // 将班级插入到选项中
    async handlePushOption() {
      this.changeClassIDToName()
      this.options = [];
      this.options = this.courseData?.classNameList
        ? this.courseData.classNameList.split(",").map((item) => {
          if (item) return { value: item, label: item };
          })
        : [];
      if (this.courseData?.classIDList) {
        const data = await this.$store.dispatch("class/classIdToClassName", {classIDList:this.courseData?.classIDList})
        let mapData = data.map(item => { return { value: item.className, label: item.className}})
        this.options = this.options.concat(mapData)
        // this.options = this.options.reduce((unique, item) => unique.some(uitem => uitem.value == item.value) ? unique : [...unique, item], [])
      }
      this.options.unshift({ value: "全部", label: "全部" });
      this.options = this.options.reduce((unique, item) => unique.some(uitem => uitem.value == item.value) ? unique : [...unique, item], [])
    },
    handleChange(val) {
      if (this.$route.name !== "MyCourses") {
        const { currNo, courseID } = this.$route.query;
        this.$router.push({
          name: this.$route.name,
          query: {
            currNo: currNo,
            courseID: courseID,
            filter: val,
          },
          params: this.$route.params.id ? { id: currNo } : {},
        });
      }
      this.$nextTick(() => {
        this.$emit("handleChange", val);
      });
    },
    async changeClassIDToName() {
      const list = await this.$store.dispatch("class/gClassList");
      this.courseData.classNameList = list
        .filter((item) =>
          this.courseData?.classIDList?.split(",").includes(item.classID + "")
        )
        ?.map((item) => item.className)
        ?.join(",");
    },
  },
  mounted() {
    this.handlePushOption();
    // if (this.defaultSelct) this.value = this.defaultSelct.split(",");
    if (
      this.$route.name == "myTeaching" ||
      this.$route.name == "StudentList" ||
      this.$route.name == "Statistics"
    )
      this.$nextTick(() => (this.value = "全部"));
    if (this.defaultSelct && this.defaultSelct.length !== 0)
      this.$nextTick(() => (this.value = this.defaultSelct.split(",")[0]));
  },
};
</script>

<style>
</style>